<template>
    <div ref="cont" :style="{ width: width, height: height }">请稍后</div>
</template>

<script>
/**
 * 异步的版本,渲染时才会加载各个库文件
 * 这个版本会依赖2.js,需要修改配置,为了降低用户使用的复杂度,暂时不使用这个版本
 */
import base from "./base.vue";

const { info } = console;

let cache;

function asyncInit(cb) {
    if (cache) {
        cb(cache);
    } else {
        /**
         * 这几个文件必须全部异步加载,如果让echarts使用import的方式加载,就会出现问题
         */
        require([
            "echarts/core",
            "echarts/renderers",
            "echarts-gl/charts",
            "echarts-gl/components",
            "./world.js",
            "../assets/echart/flights.json",
        ], (
            echarts,
            { CanvasRenderer },
            { Lines3DChart },
            { Geo3DComponent },
            world,
            data
        ) => {
            echarts.use([CanvasRenderer]);
            echarts.use([Lines3DChart]);
            echarts.use([Geo3DComponent]);

            //注册地图
            world = world.default;
            world(echarts);

            cache = { echarts, data };

            cb(cache);
        });
    }
}

export default {
    mixins: [base],
    methods: {
        reChart(cb) {
            asyncInit(({ echarts, data }) => {
                const myChart = (this.chart = echarts.init(
                    this.$refs["cont"]
                ));

                function getAirportCoord(idx) {
                    return [data.airports[idx][3], data.airports[idx][4]];
                }
                var routes = data.routes.map(function (airline) {
                    return [
                        getAirportCoord(airline[1]),
                        getAirportCoord(airline[2]),
                    ];
                });

                myChart.setOption({
                    geo3D: {
                        map: "world",
                        shading: "realistic",
                        silent: true,
                        environment: "#333",
                        realisticMaterial: {
                            roughness: 0.8,
                            metalness: 0,
                        },
                        postEffect: {
                            enable: true,
                        },
                        groundPlane: {
                            show: false,
                        },
                        light: {
                            main: {
                                intensity: 1,
                                alpha: 30,
                            },
                            ambient: {
                                intensity: 0,
                            },
                        },
                        viewControl: {
                            distance: 70,
                            alpha: 89,
                            panMouseButton: "left",
                            rotateMouseButton: "right",
                        },
                        itemStyle: {
                            color: "#000",
                        },
                        regionHeight: 0.5,
                    },
                    series: [
                        {
                            type: "lines3D",
                            coordinateSystem: "geo3D",
                            effect: {
                                show: true,
                                trailWidth: 1,
                                trailOpacity: 0.5,
                                trailLength: 0.2,
                                constantSpeed: 5,
                            },
                            blendMode: "lighter",
                            lineStyle: {
                                width: 0.2,
                                opacity: 0.05,
                            },
                            data: routes,
                        },
                    ],
                });
                window.addEventListener("keydown", function () {
                    myChart.dispatchAction({
                        type: "lines3DToggleEffect",
                        seriesIndex: 0,
                    });
                });

                cb && cb();
            });
        },
    },
};
</script>
